<template>
  <div class="music-player_container" v-if="showPlayer">
    <div class="music-player_header">
      <player-header>
        <template #left>
          <van-icon name="arrow-down" @click="showPlayer = false" />
        </template>
        <template #center>
          <div class="music-player_panel_switch">
            <div :class="[active === 0 ? 'music-player_panel_switch_active' : '']" @click="handleSwitchSwipe(0)">
              歌曲
            </div>
            <div class="">|</div>
            <div :class="[active === 1 ? 'music-player_panel_switch_active' : '']" @click="handleSwitchSwipe(1)">
              歌词
            </div>
          </div>
        </template>
        <template #right>
          <van-icon name="wap-nav" @click="openMusicPopup" />
        </template>
      </player-header>
    </div>
    <div class="music-player_content">
      <player-panel ref="playerRef" @swipe-change="hanleSwipeChange" />
    </div>
    <music-list ref="musicListRef" />
    <van-overlay :show="playerLoading" z-index="1004">
      <div class="wrapper">
        <van-loading color="#fff" vertical>加载音乐中</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import playerHeader from "./components/playerHeader.vue";
import playerPanel from "./components/playerPanel.vue";
import musicList from "./components/musicList.vue";
import mitter from "@/utils/mitt";
import usePlayerStore from "@/store/playerStore";

const { loadMusicPlayer } = usePlayerStore();

const musicListRef = ref<InstanceType<typeof musicList>>(),
  playerRef = ref<InstanceType<typeof playerPanel>>(),
  showPlayer = ref(false),
  playerLoading = ref(false);

const active = ref(0);

mitter.on("openMusicPlayer", () => {
  showPlayer.value = true;
});

mitter.on("playMusic", async (id: number) => {
  playerLoading.value = true;
  showPlayer.value = true;
  await loadMusicPlayer(id);
  playerLoading.value = false;
});

const openMusicPopup = () => {
  musicListRef.value?.openPopup();
};

const handleSwitchSwipe = (index: number) => {
  playerRef.value?.switchSWipe(index);
};

const hanleSwipeChange = (index: number) => {
  active.value = index;
};
</script>

<style scoped lang="scss">
.music-player {
  &_container {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--main-color);
    z-index: 1111;
  }
  &_content {
    flex: 1;
    width: 100%;
  }
  &_header {
    color: var(--font-active-color);
    font-size: 18px;
    width: 100vw;
    margin-bottom: 20px;
  }
  &_panel_switch {
    display: flex;
    align-items: center;
    color: var(--font-light-color);
    gap: 5px;
    &_active {
      color: var(--font-active-color);
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
